<template>
  <a-card class="payment-voucher-card" title="付款凭证管理">
    <template #extra>
      <a-space>
        <a-button size="small" @click="refreshData">
          <template #icon>
            <icon-refresh />
          </template>
          刷新
        </a-button>
        <a-button size="small" type="primary" @click="showAddModal" v-perm="['lindi:tradeApplicationCredit:add']">
          <template #icon>
            <icon-plus />
          </template>
          添加凭证
        </a-button>
      </a-space>
    </template>

    <!-- 付款凭证列表 -->
    <div class="voucher-list">
      <div v-if="props.loading" class="loading-container">
        <a-spin size="large" />
      </div>
      
      <div v-else-if="voucherList.length === 0" class="empty-container">
        <a-empty description="暂无付款凭证" />
      </div>
      
      <div v-else class="voucher-grid">
        <div v-for="voucher in voucherList" :key="voucher.creditId" class="voucher-item">
          <a-card class="voucher-card" hoverable>
            <div class="voucher-header">
              <div class="voucher-icon">
                <a-avatar :size="48" class="bg-green-100" shape="square">
                  <icon-file-image v-if="isImageFile(voucher.creditFile?.fileName)" class="text-green-600" />
                  <icon-file-pdf v-else-if="isPdfFile(voucher.creditFile?.fileName)" class="text-red-600" />
                  <icon-file v-else class="text-gray-600" />
                </a-avatar>
              </div>
              <div class="voucher-info">
                <div class="voucher-title">{{ voucher.creditName }}</div>
                <div class="voucher-meta">
                  <span class="voucher-type">{{ getPaymentTypeText(voucher.creditType) }}</span>
                  <a-tag color="blue" size="small">
                    付款凭证
                  </a-tag>
                </div>
              </div>
            </div>
            
            <div class="voucher-details">
              <div class="detail-row">
                <span class="detail-label">付款金额：</span>
                <span class="detail-value amount">{{ voucher.creditAmount }}万元</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">付款日期：</span>
                <span class="detail-value">{{ voucher.creditDate || '-' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">收款方：</span>
                <span class="detail-value">{{ voucher.creditPayee || '-' }}</span>
              </div>
              <div v-if="voucher.creditCode" class="detail-row">
                <span class="detail-label">交易流水号：</span>
                <span class="detail-value transaction-number">{{ voucher.creditCode }}</span>
              </div>
              <div v-if="voucher.remark" class="detail-row">
                <span class="detail-label">备注：</span>
                <span class="detail-value">{{ voucher.remark }}</span>
              </div>
            </div>
            
            <div class="voucher-actions">
              <a-space>
                <a-button size="mini" @click="previewVoucher(voucher)">
                  <template #icon>
                    <icon-eye />
                  </template>
                  预览
                </a-button>
                <a-button size="mini" type="primary" @click="downloadVoucher(voucher)">
                  <template #icon>
                    <icon-download />
                  </template>
                  下载
                </a-button>
                <a-button size="mini" @click="editVoucher(voucher)" v-perm="['lindi:tradeApplicationCredit:update']">
                  <template #icon>
                    <icon-edit />
                  </template>
                  编辑
                </a-button>
                <a-button size="mini" status="danger" @click="deleteVoucher(voucher)" v-perm="['lindi:tradeApplicationCredit:delete']">
                  <template #icon>
                    <icon-delete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </div>
          </a-card>
        </div>
      </div>
    </div>

    <!-- 新增/编辑付款凭证弹窗 -->
    <a-modal
      v-model:visible="modalVisible"
      :title="modalTitle"
      width="700px"
      @ok="handleSubmit"
      @cancel="handleModalCancel"
      @close="handleModalCancel"
    >
      <a-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="creditName" label="凭证标题" required>
              <a-input v-model="formData.creditName" placeholder="请输入凭证标题" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="creditType" label="付款类型" required>
              <a-select v-model="formData.creditType" placeholder="请选择付款类型">
                <a-option
                  v-for="(d, index) in dicts[proxy.DICT.lindiTradeApplicationCredit]"
                  :key="index"
                  :label="d.dictValue"
                  :value="d.dictKey"
                />
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="creditAmount" label="付款金额(万元)" required>
              <a-input
                v-model="formData.creditAmount"
                placeholder="请输入付款金额"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="creditDate" label="付款日期" required>
              <a-date-picker
                v-model="formData.creditDate"
                style="width: 100%"
                placeholder="请选择付款日期"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="creditPayee" label="收款方" required>
              <a-input v-model="formData.creditPayee" placeholder="请输入收款方名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="creditCode" label="交易流水号">
              <a-input v-model="formData.creditCode" placeholder="请输入交易流水号" />
            </a-form-item>
          </a-col>
        </a-row>
        
        <a-form-item field="voucherFile" label="凭证文件">
          <div class="file-upload-container">
            <!-- 已有附件展示区域 -->
            <div v-if="existingFiles.length > 0" class="existing-files-container mb-4">
              <div class="mb-2 flex items-center justify-between">
                <div class="text-gray-500">
                  <icon-info-circle class="mr-1" /> 已上传凭证文件
                </div>
              </div>
              <a-list :bordered="false" :grid="{ gutter: 16, column: 3 }">
                <a-list-item v-for="(file, index) in existingFiles" :key="file.fileId">
                  <a-card class="file-card" hoverable>
                    <div class="flex items-start">
                      <div class="file-icon mr-3">
                        <a-avatar :size="40" shape="square">
                          <icon-file-pdf v-if="file.fileType === 'pdf'"/>
                          <icon-file-image v-else-if="['jpg', 'png', 'jpeg'].includes(file.fileType)"/>
                          <icon-file v-else/>
                        </a-avatar>
                      </div>
                      <div class="flex-1 overflow-hidden">
                        <div class="font-medium truncate mb-1">{{ file.fileName }}</div>
                        <div class="text-gray-500 text-xs mb-1">上传时间：{{ file.uploadTime || '未知' }}</div>
                        <div class="mt-2">
                          <a-space>
                            <a-button size="mini" type="primary" @click="downloadFile(file)">
                              下载
                            </a-button>
                            <a-button size="mini" @click="previewFile(file)">
                              预览
                            </a-button>
                            <a-button size="mini" status="danger" @click="removeExistingFile(index)">
                              删除
                            </a-button>
                          </a-space>
                        </div>
                      </div>
                    </div>
                  </a-card>
                </a-list-item>
              </a-list>
            </div>

            <uploadFile
              ref="voucherUploadFileRef"
              :file-source="fs"
              :limit="1"
              :multiple="false"
              accept=".pdf,.jpg,.png,.jpeg"
              list-type="text"
              source-type="proxy"
              @upload-success="handleUploadSuccess"
            />
          </div>
        </a-form-item>
        
        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="formData.remark"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            placeholder="请输入备注信息"
          />
        </a-form-item>
      </a-form>
    </a-modal>


  </a-card>
</template>

<script setup>
import { onMounted, reactive, ref, computed, getCurrentInstance } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import {
  IconRefresh,
  IconPlus,
  IconEye,
  IconEdit,
  IconDelete,
  IconDownload,
  IconCheck,
  IconFile,
  IconFileImage,
  IconFilePdf,
  IconInfoCircle
} from '@arco-design/web-vue/es/icon';
import uploadFile from '~/components/uploadFile/index.vue';
import { fileSource } from '~/utils/sys.js';
import {
  getTradeApplicationCreditListByTradeApplicationIdApi,
  addTradeApplicationCreditApi,
  updateTradeApplicationCreditByTradeApplicationCreditIdApi,
  deleteTradeApplicationCreditByTradeApplicationCreditIdApi
} from '~/api/lindi/tradeApplicationCredit';
import { deleteFileApi } from '~/api/basic/file.js';
import { LoadDicts, DICT } from '~/utils/dict.js';

// 定义props
const props = defineProps({
  tradeApplicationId: {
    type: String,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
});

// 获取当前实例
const {proxy} = getCurrentInstance();

// 加载字典
const dicts = proxy.LoadDicts([DICT.lindiTradeApplicationCredit, DICT.lindiTradeApplicationPayment]);

// 响应式数据
// const loading = ref(false); // 使用父组件传递的loading状态
const modalVisible = ref(false);
const modalTitle = ref('添加付款凭证');
const formRef = ref(null);
const voucherUploadFileRef = ref(null);
const voucherList = ref([]);
const editingVoucher = ref(null);
const fileList = ref([]);
const existingFiles = ref([]);
const newUploadedFileIds = ref([]); // 跟踪新上传的文件ID，用于取消时清理

// 文件来源配置
const fs = fileSource.lindi_trade_credit_file?.key || 'lindi_trade_application_credit_file';

// 付款统计
const summary = computed(() => {
  const totalCount = voucherList.value.length;
  const totalAmount = voucherList.value.reduce((sum, item) => sum + (item.amount || 0), 0);
  const confirmedCount = voucherList.value.filter(item => item.status === 'confirmed').length;
  const pendingCount = voucherList.value.filter(item => item.status === 'pending').length;
  
  return {
    totalCount,
    totalAmount: totalAmount.toFixed(2),
    confirmedCount,
    pendingCount
  };
});

// 表单数据
const formData = reactive({
  creditName: '',
  creditType: '',
  creditAmount: '',
  creditDate: '',
  creditPayee: '',
  creditCode: '',
  creditFileId: '',
  remark: ''
});

// 表单验证规则
const formRules = {
  creditName: [
    { required: true, message: '请输入凭证标题' },
    { maxLength: 100, message: '凭证标题不能超过100个字符' }
  ],
  creditType: [
    { required: true, message: '请选择付款类型' }
  ],
  creditAmount: [
    { required: true, message: '请输入付款金额' }
  ],
  creditDate: [
    { required: true, message: '请选择付款日期' }
  ],
  creditPayee: [
    { required: true, message: '请输入收款方名称' }
  ],
};

// 判断是否为图片文件
const isImageFile = (fileName) => {
  if (!fileName) return false;
  const ext = fileName.toLowerCase().split('.').pop();
  return ['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext);
};

// 判断是否为PDF文件
const isPdfFile = (fileName) => {
  if (!fileName) return false;
  return fileName.toLowerCase().endsWith('.pdf');
};

// 获取付款类型文本
const getPaymentTypeText = (type) => {
  if (!type || !dicts[proxy.DICT.lindiTradeApplicationCredit]) {
    return '未知类型';
  }
  const dict = dicts[proxy.DICT.lindiTradeApplicationCredit].find(d => String(d.dictKey) === String(type));
  return dict ? dict.dictValue : '未知类型';
};



// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    'pending': 'orange',
    'confirmed': 'green',
    'rejected': 'red'
  };
  return colorMap[status] || 'gray';
};

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    'pending': '待确认',
    'confirmed': '已确认',
    'rejected': '已拒绝'
  };
  return textMap[status] || '未知状态';
};

// 加载数据
const loadData = async () => {
  if (!props.tradeApplicationId) {
    console.warn('交易申请ID为空，无法加载付款凭证数据');
    return;
  }
  
  try {
    // loading.value = true; // 加载状态由父组件控制
    const response = await getTradeApplicationCreditListByTradeApplicationIdApi(props.tradeApplicationId);
    
      // 直接使用后端数据格式，保持与Java VO类一致
      voucherList.value = response.map(item => ({
        creditId: String(item.creditId), // Long类型转为字符串
        tradeApplicationId: String(item.tradeApplicationId), // Long类型转为字符串
        creditName: item.creditName || '付款凭证',
        creditAmount: item.creditAmount || '',
        creditDate: item.creditDate,
        creditType: item.creditType || '',
        creditPayee: item.creditPayee || '',
        creditCode: item.creditCode || '',
        remark: item.remark || '',
        creditFileId: item.creditFileId ? String(item.creditFileId) : '', // Long类型转为字符串
        creditFile: item.creditFile || null,
        createId: item.createId ? String(item.createId) : '', // Long类型转为字符串
        updateId: item.updateId ? String(item.updateId) : '', // Long类型转为字符串
        createTime: item.createTime,
        updateTime: item.updateTime
      }));

  } catch (error) {
    console.error('获取付款凭证列表异常:', error);
    Message.error('获取付款凭证列表失败，请稍后重试');
    voucherList.value = [];
  } finally {
    // loading.value = false; // 加载状态由父组件控制
  }
};

// 刷新数据
const refreshData = () => {
  loadData();
};

// 显示新增弹窗
const showAddModal = () => {
  modalTitle.value = '添加付款凭证';
  editingVoucher.value = null;
  newUploadedFileIds.value = []; // 清空文件跟踪
  resetForm();
  modalVisible.value = true;
};

// 预览凭证
const previewVoucher = (voucher) => {
  if (voucher.creditFile && voucher.creditFile.fileUrl) {
    window.open(voucher.creditFile.fileUrl, '_blank');
  } else {
    Message.warning('该凭证暂无附件');
  }
};

// 下载凭证
const downloadVoucher = (voucher) => {
  if (voucher.creditFile && voucher.creditFile.fileUrl) {
    const link = document.createElement('a');
    link.href = voucher.creditFile.fileUrl;
    link.download = voucher.creditFile.fileName || '付款凭证';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    Message.warning('该凭证暂无附件');
  }
};

// 编辑凭证
const editVoucher = (voucher) => {
  modalTitle.value = '编辑付款凭证';
  editingVoucher.value = voucher;
  newUploadedFileIds.value = []; // 清空文件跟踪
  Object.assign(formData, voucher);
  
  // 设置已有附件列表
  if (voucher.creditFile && voucher.creditFile.fileName) {
    existingFiles.value = [{
      fileId: voucher.creditFileId,
      fileName: voucher.creditFile.fileName,
      fileUrl: voucher.creditFile.fileUrl,
      fileType: voucher.creditFile.fileName.toLowerCase().split('.').pop() || 'pdf',
      uploadTime: voucher.createTime || '未知'
    }];
    
    // 设置上传组件的文件列表用于回显
    if (voucherUploadFileRef.value) {
      setTimeout(() => {
        if (voucherUploadFileRef.value && voucherUploadFileRef.value.fileList !== undefined) {
          voucherUploadFileRef.value.fileList = [{
            uid: voucher.creditFileId,
            name: voucher.creditFile.fileName,
            url: voucher.creditFile.fileUrl,
            status: 'done',
            response: { fileId: voucher.creditFileId }
          }];
        }
      }, 0);
    }
  } else {
    existingFiles.value = [];
  }
  
  modalVisible.value = true;
};



// 删除凭证
const deleteVoucher = (voucher) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除付款凭证「${voucher.creditName}」吗？`,
    onOk: () => {
      deleteTradeApplicationCreditByTradeApplicationCreditIdApi(voucher.creditId)
        .then(() => {
          Message.success('付款凭证删除成功');
          loadData();
        })
        .catch((error) => {
          console.error('删除付款凭证失败:', error);
          Message.error('删除付款凭证失败，请稍后重试');
        });
    }
  });
};

// 处理文件上传成功
const handleUploadSuccess = (response) => {
  if (response && response.fileId) {
    // 只有在新增模式下才跟踪文件ID（编辑模式下不需要跟踪，因为是替换已有文件）
    if (!editingVoucher.value) {
      newUploadedFileIds.value.push(response.fileId);
    }
    console.log('文件上传成功，文件ID:', response.fileId);
  }
};

// 预览文件
const previewFile = (file) => {
  if (file.fileUrl) {
    window.open(file.fileUrl, '_blank');
  } else {
    Message.warning('文件链接不存在');
  }
};

// 下载文件
const downloadFile = (file) => {
  if (file.fileUrl) {
    const link = document.createElement('a');
    link.href = file.fileUrl;
    link.download = file.fileName || 'download';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    Message.warning('文件链接不存在');
  }
};

// 删除已有附件
const removeExistingFile = (index) => {
  existingFiles.value.splice(index, 1);
  // 同时清空上传组件的文件列表
  if (voucherUploadFileRef.value && voucherUploadFileRef.value.fileList !== undefined) {
    voucherUploadFileRef.value.fileList = [];
  }
};

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((errors) => {
    if (errors) {
      return;
    }
    
    // 准备提交数据
    const submitData = {
      ...formData,
      tradeApplicationId: String(props.tradeApplicationId)
    };
    
    // 确保Long类型字段以字符串形式传递
    if (submitData.creditId) {
      submitData.creditId = String(submitData.creditId);
    }
    if (submitData.creditFileId) {
      submitData.creditFileId = String(submitData.creditFileId);
    }
    
    // 处理日期格式转换
    if (submitData.creditDate) {
      // 如果日期是字符串格式（yyyy-MM-dd），转换为 yyyy-MM-dd HH:mm:ss 格式
      if (typeof submitData.creditDate === 'string' && submitData.creditDate.length === 10) {
        submitData.creditDate = submitData.creditDate + ' 00:00:00';
      } else if (submitData.creditDate instanceof Date) {
        // 如果是Date对象，格式化为 yyyy-MM-dd HH:mm:ss
        const year = submitData.creditDate.getFullYear();
        const month = String(submitData.creditDate.getMonth() + 1).padStart(2, '0');
        const day = String(submitData.creditDate.getDate()).padStart(2, '0');
        submitData.creditDate = `${year}-${month}-${day} 00:00:00`;
      }
    }
    
    // 处理文件上传
    let fileId = null;
    if (newUploadedFileIds.value.length > 0) {
      // 使用新上传的文件
      fileId = String(newUploadedFileIds.value[0]);
    } else if (existingFiles.value.length > 0) {
      // 使用已有文件
      fileId = String(existingFiles.value[0].fileId);
    } else if (voucherUploadFileRef.value && voucherUploadFileRef.value.fileList && voucherUploadFileRef.value.fileList.length > 0) {
      const file = voucherUploadFileRef.value.fileList[0];
      if (file && file.response && file.response.fileId) {
        fileId = String(file.response.fileId);
      }
    }
    
    // 如果仍然没有获取到文件ID，尝试使用getUploadFileId方法
    if (!fileId && voucherUploadFileRef.value) {
      const uploadFileIds = voucherUploadFileRef.value.getUploadFileId();
      if (uploadFileIds) {
        // getUploadFileId返回逗号分隔的字符串，取第一个
        const fileIdArray = uploadFileIds.split(',').filter(Boolean);
        if (fileIdArray.length > 0) {
          fileId = String(fileIdArray[0]);
        }
      }
    }
    
    if (fileId) {
      submitData.creditFileId = fileId;
    }
    
    if (!submitData.creditFileId && !editingVoucher.value) {
      Message.error('请上传付款凭证文件');
      return;
    }
    console.log('提交数据:', submitData);
    
    // 调用API
    if (editingVoucher.value) {
      // 编辑模式：调用更新API，直接使用submitData
      updateTradeApplicationCreditByTradeApplicationCreditIdApi(submitData)
        .then(() => {
          Message.success('付款凭证更新成功');
          modalVisible.value = false;
          resetForm();
          loadData();
        })
        .catch((error) => {
          console.error('更新付款凭证失败:', error);
          Message.error('更新付款凭证失败，请稍后重试');
        });
    } else {
      // 新增模式：调用添加API，直接使用submitData
      addTradeApplicationCreditApi(submitData)
        .then(() => {
          Message.success('付款凭证添加成功');
          // 清空新上传文件跟踪，因为已经保存成功
          newUploadedFileIds.value = [];
          modalVisible.value = false;
          resetForm();
          loadData();
        })
        .catch((error) => {
          console.error('添加付款凭证失败:', error);
          Message.error('添加付款凭证失败，请稍后重试');
        });
    }
  });
};



// 处理模态框取消/关闭事件
const handleModalCancel = async () => {
  // 清理新上传但未保存的文件
  await cleanupUnusedFiles();
  // 重置表单
  resetForm();
};

// 清理未使用的文件
const cleanupUnusedFiles = async () => {
  if (newUploadedFileIds.value.length > 0) {
    try {
      // 删除所有新上传但未保存的文件
      for (const fileId of newUploadedFileIds.value) {
        await deleteFileApi(fileId);
      }
      console.log('已清理未保存的文件:', newUploadedFileIds.value);
    } catch (error) {
      console.error('清理文件失败:', error);
    } finally {
      newUploadedFileIds.value = [];
    }
  }
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(formData, {
    voucherTitle: '',
    paymentType: '',
    amount: null,
    paymentDate: '',
    paymentMethod: '',
    payee: '',
    transactionNumber: '',
    voucherFile: null,
    remark: ''
  });
  fileList.value = [];
  existingFiles.value = [];
  newUploadedFileIds.value = [];
  editingVoucher.value = null;
  
  // 清空上传组件的文件列表
  if (voucherUploadFileRef.value && voucherUploadFileRef.value.fileList !== undefined) {
    voucherUploadFileRef.value.fileList = [];
  }
};

// 组件挂载时加载数据
onMounted(() => {
  loadData();
});
</script>

<style scoped>
.payment-voucher-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-summary {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.mb-4 {
  margin-bottom: 16px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.voucher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 16px;
}

.voucher-item {
  height: 100%;
}

.voucher-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.voucher-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.voucher-icon {
  flex-shrink: 0;
}

.voucher-info {
  flex: 1;
  min-width: 0;
}

.voucher-title {
  font-weight: 500;
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  word-break: break-all;
}

.voucher-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voucher-type {
  font-size: 12px;
  color: #666;
}

.voucher-details {
  flex: 1;
  margin-bottom: 16px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.detail-label {
  font-size: 12px;
  color: #666;
  min-width: 80px;
  flex-shrink: 0;
}

.detail-value {
  font-size: 12px;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.detail-value.amount {
  font-weight: 500;
  color: #1890ff;
}

.detail-value.transaction-number {
  font-family: monospace;
  font-size: 11px;
}

.voucher-actions {
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #1890ff;
  background-color: #f0f8ff;
}

.upload-icon {
  font-size: 24px;
  color: #999;
  margin-bottom: 8px;
}

.upload-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.upload-tip {
  font-size: 12px;
  color: #999;
}

.bg-green-100 {
  background-color: #f6ffed;
}

.text-green-600 {
  color: #52c41a;
}

.text-red-600 {
  color: #ff4d4f;
}

.text-gray-600 {
  color: #666;
}

@media (max-width: 768px) {
  .voucher-grid {
    grid-template-columns: 1fr;
  }
  
  .voucher-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .voucher-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
</style>